<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores'
import { loginOutAPI } from '@/api/login'
import { getTaskInfoAPI } from '@/api/jisuan'
const userStore = useUserStore()
let userInfo = ref()

const showActionSheetModelMy = ref(false)

// 随便调个接口校验token是否过期
const getTaskInfo = () => {
  getTaskInfoAPI().then(res => {
    if(res) {
      userInfo.value = userStore.userInfo
      if (userInfo.value && !userInfo.value.nickName) {
        const srcMatch = userInfo.value.avatar.match(/<img.*?src=["'](.*?)["']/);
        if (srcMatch && srcMatch[1]) {
          userInfo.value.avatar = srcMatch[1]
        }
      }
    }
  })
  .catch(error => {
    userStore.clearUserInfo()
    userInfo.value = undefined
  })
}

// 退出登录
const loginOut = async () => {
  await loginOutAPI()
  uni.showToast({
    title: '退出登录成功',
    icon: 'success',
    duration: 2000
  })
  
  showActionSheetModelMy.value = false
  userInfo.value = undefined
  userStore.setLoginStatus(true)
  userStore.clearUserInfo()
  userStore.clearToken()
  uni.showTabBar({ animation: false })
}

// 登录
const toLogin = () => {
  showActionSheetModelMy.value = true
  userStore.setLoginStatus(false)
  uni.hideTabBar({ animation: false })
}

// 头像不能正常显示的时候显示默认图片
const onImageError = () => {
  userInfo.value.avatar = 'https://images-cloud.qboson.com/community/avatar/noavatar.svg'
}
onShow(() => {
  getTaskInfo()
})
//  actionSheet暂不登录操作按钮
uni.$on('closeActionSheet',function(){
  showActionSheetModelMy.value = false
  userStore.clearUserInfo()
  uni.showTabBar({ animation: false })
})
// 登录成功
uni.$on('loginSuccess', function(info: any){
  userInfo.value = info
  if (userInfo.value && !userInfo.value.nickName) {
    const srcMatch = userInfo.value.avatar.match(/<img.*?src=["'](.*?)["']/);
    if (srcMatch && srcMatch[1]) {
      userInfo.value.avatar = srcMatch[1]
    }
  }
})
uni.$on('loginError', function(){
  showActionSheetModelMy.value = false
})

</script>

<template>
  <my-header navType="list"></my-header>
  <view class="mine">
    <view class="content">
      <view class="user-atvar">
        <img class="user_avatar" :src="userInfo && userInfo.avatar ? userInfo.avatar : userInfo && userInfo.avatarUrl ? userInfo.avatarUrl : '/static/img/atvar.png'" @error="onImageError" />
      </view>
      <text class="user-name" v-if="userInfo && userInfo.nickName">{{ userInfo.nickName }}</text>
      <text class="user-name" v-else-if="userInfo && !userInfo.nickName">{{ userInfo.username }}</text>
      <text class="user-name" v-else>点击按钮即可登录</text>
      <up-button v-if="userInfo" type="primary" text="退出登录" color="#2A65FF" @click="loginOut"></up-button>
      <up-button v-else type="primary" text="登录" color="#2A65FF" @click="toLogin"></up-button>
    </view>
  </view>
  <my-action-sheet v-if="showActionSheetModelMy"></my-action-sheet>
  <my-sticky-button v-if="userStore.userInfo?.uid && !userStore.userInfo?.is_user_channel" />
</template>

<style lang="scss">
.mine{
  width: 90%;
  margin: auto;
  margin-top: 68px;
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    .user-atvar {
      width: 88px;
      height: 88px;
      .user_avatar{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .user-name {
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      letter-spacing: 0px;
      font-variation-settings: "opsz" auto;
      /* base/font/gy1 */
      color: rgba(0, 0, 0, 0.9);
      margin: 12px 0 24px 0;
    }
  }
}
</style>
